<template>
  <div class="teacher-list">
    <div class="page-title">教师管理</div>
    
    <!-- 搜索表单 -->
    <a-card class="search-form mb-16">
      <a-form
        ref="searchFormRef"
        :model="searchForm"
        layout="inline"
        @finish="handleSearch"
      >
        <a-form-item label="教师姓名" name="name">
          <a-input
            v-model:value="searchForm.name"
            placeholder="请输入教师姓名"
            allow-clear
          />
        </a-form-item>
        
        <a-form-item label="工号" name="teacherId">
          <a-input
            v-model:value="searchForm.teacherId"
            placeholder="请输入工号"
            allow-clear
          />
        </a-form-item>
        
        <a-form-item label="学科" name="subject">
          <a-select
            v-model:value="searchForm.subject"
            placeholder="请选择学科"
            allow-clear
            style="width: 150px"
          >
            <a-select-option value="语文">语文</a-select-option>
            <a-select-option value="数学">数学</a-select-option>
            <a-select-option value="英语">英语</a-select-option>
            <a-select-option value="物理">物理</a-select-option>
            <a-select-option value="化学">化学</a-select-option>
            <a-select-option value="生物">生物</a-select-option>
            <a-select-option value="历史">历史</a-select-option>
            <a-select-option value="地理">地理</a-select-option>
            <a-select-option value="政治">政治</a-select-option>
            <a-select-option value="体育">体育</a-select-option>
            <a-select-option value="音乐">音乐</a-select-option>
            <a-select-option value="美术">美术</a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item label="职称" name="title">
          <a-select
            v-model:value="searchForm.title"
            placeholder="请选择职称"
            allow-clear
            style="width: 120px"
          >
            <a-select-option value="助教">助教</a-select-option>
            <a-select-option value="讲师">讲师</a-select-option>
            <a-select-option value="副教授">副教授</a-select-option>
            <a-select-option value="教授">教授</a-select-option>
            <a-select-option value="特级教师">特级教师</a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item>
          <a-space>
            <a-button type="primary" html-type="submit" :loading="loading">
              <template #icon>
                <SearchOutlined />
              </template>
              搜索
            </a-button>
            <a-button @click="handleReset">
              <template #icon>
                <ReloadOutlined />
              </template>
              重置
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-card>
    
    <!-- 操作按钮 -->
    <div class="action-buttons mb-16">
      <a-space>
        <a-button type="primary" @click="handleAdd">
          <template #icon>
            <PlusOutlined />
          </template>
          添加教师
        </a-button>
        
        <a-button
          type="primary"
          ghost
          :disabled="!selectedRowKeys.length"
          @click="handleBatchDelete"
        >
          <template #icon>
            <DeleteOutlined />
          </template>
          批量删除
        </a-button>
        
        <a-button @click="handleExport">
          <template #icon>
            <ExportOutlined />
          </template>
          导出教师
        </a-button>
      </a-space>
    </div>
    
    <!-- 教师列表表格 -->
    <a-card class="data-table">
      <a-table
        :columns="columns"
        :data-source="teacherList"
        :loading="loading"
        :pagination="pagination"
        :row-selection="rowSelection"
        :scroll="{ x: 1200 }"
        @change="handleTableChange"
      >
        <!-- 头像列 -->
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'avatar'">
            <a-avatar :size="40">
              <template #icon>
                <UserOutlined />
              </template>
            </a-avatar>
          </template>
          
          <!-- 性别列 -->
          <template v-else-if="column.key === 'gender'">
            <a-tag :color="record.gender === 'M' ? 'blue' : 'pink'">
              {{ record.gender === 'M' ? '男' : '女' }}
            </a-tag>
          </template>
          
          <!-- 年龄列 -->
          <template v-else-if="column.key === 'age'">
            {{ calculateAge(record.birthDate) }}岁
          </template>
          
          <!-- 职称列 -->
          <template v-else-if="column.key === 'title'">
            <a-tag color="green">{{ record.title }}</a-tag>
          </template>
          
          <!-- 教龄列 -->
          <template v-else-if="column.key === 'teachingYears'">
            {{ calculateTeachingYears(record.hireDate) }}年
          </template>
          
          <!-- 操作列 -->
          <template v-else-if="column.key === 'action'">
            <a-space>
              <a-button type="link" size="small" @click="handleView(record)">
                查看
              </a-button>
              <a-button type="link" size="small" @click="handleEdit(record)">
                编辑
              </a-button>
              <a-popconfirm
                title="确定要删除这个教师吗？"
                @confirm="handleDelete(record)"
              >
                <a-button type="link" size="small" danger>
                  删除
                </a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { message, Modal } from 'ant-design-vue'
import {
  SearchOutlined,
  ReloadOutlined,
  PlusOutlined,
  DeleteOutlined,
  ExportOutlined,
  UserOutlined
} from '@ant-design/icons-vue'
import { calculateAge } from '@/utils'

const router = useRouter()

// 表单引用
const searchFormRef = ref()

// 加载状态
const loading = ref(false)

// 搜索表单
const searchForm = reactive({
  name: '',
  teacherId: '',
  subject: undefined,
  title: undefined
})

// 选中的行
const selectedRowKeys = ref([])

// 教师列表
const teacherList = ref([
  {
    id: '1',
    teacherId: 'T2024001',
    name: '王老师',
    gender: 'F',
    birthDate: '1985-03-15',
    phone: '13900139001',
    email: 'wang@school.edu.cn',
    subject: '语文',
    title: '高级教师',
    hireDate: '2010-09-01',
    education: '本科',
    department: '语文组'
  },
  {
    id: '2',
    teacherId: 'T2024002',
    name: '李老师',
    gender: 'M',
    birthDate: '1980-07-20',
    phone: '13900139002',
    email: 'li@school.edu.cn',
    subject: '数学',
    title: '特级教师',
    hireDate: '2005-09-01',
    education: '硕士',
    department: '数学组'
  },
  {
    id: '3',
    teacherId: 'T2024003',
    name: '张老师',
    gender: 'F',
    birthDate: '1990-12-10',
    phone: '13900139003',
    email: 'zhang@school.edu.cn',
    subject: '英语',
    title: '讲师',
    hireDate: '2015-09-01',
    education: '硕士',
    department: '英语组'
  },
  {
    id: '4',
    teacherId: 'T2024004',
    name: '刘老师',
    gender: 'M',
    birthDate: '1975-05-25',
    phone: '13900139004',
    email: 'liu@school.edu.cn',
    subject: '物理',
    title: '副教授',
    hireDate: '2000-09-01',
    education: '博士',
    department: '理科组'
  }
])

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 4,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条`
})

// 表格列配置
const columns = [
  {
    title: '头像',
    key: 'avatar',
    width: 80,
    align: 'center'
  },
  {
    title: '工号',
    dataIndex: 'teacherId',
    key: 'teacherId',
    width: 120
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    width: 100
  },
  {
    title: '性别',
    key: 'gender',
    width: 80,
    align: 'center'
  },
  {
    title: '年龄',
    key: 'age',
    width: 80,
    align: 'center'
  },
  {
    title: '联系电话',
    dataIndex: 'phone',
    key: 'phone',
    width: 130
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    key: 'email',
    width: 180
  },
  {
    title: '学科',
    dataIndex: 'subject',
    key: 'subject',
    width: 100
  },
  {
    title: '职称',
    key: 'title',
    width: 120,
    align: 'center'
  },
  {
    title: '教龄',
    key: 'teachingYears',
    width: 80,
    align: 'center'
  },
  {
    title: '学历',
    dataIndex: 'education',
    key: 'education',
    width: 80
  },
  {
    title: '操作',
    key: 'action',
    width: 180,
    fixed: 'right'
  }
]

// 行选择配置
const rowSelection = computed(() => ({
  selectedRowKeys: selectedRowKeys.value,
  onChange: (keys) => {
    selectedRowKeys.value = keys
  }
}))

// 计算教龄
const calculateTeachingYears = (hireDate) => {
  if (!hireDate) return 0
  
  const hire = new Date(hireDate)
  const today = new Date()
  
  let years = today.getFullYear() - hire.getFullYear()
  const monthDiff = today.getMonth() - hire.getMonth()
  
  if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < hire.getDate())) {
    years--
  }
  
  return Math.max(0, years)
}

// 搜索
const handleSearch = () => {
  pagination.current = 1
  loadTeacherList()
}

// 重置搜索
const handleReset = () => {
  searchFormRef.value.resetFields()
  pagination.current = 1
  loadTeacherList()
}

// 添加教师
const handleAdd = () => {
  message.info('添加教师功能开发中...')
}

// 查看教师
const handleView = (record) => {
  message.info('查看教师功能开发中...')
}

// 编辑教师
const handleEdit = (record) => {
  message.info('编辑教师功能开发中...')
}

// 删除教师
const handleDelete = async (record) => {
  try {
    // 调用删除API
    // await teacherApi.deleteTeacher(record.id)
    
    message.success('删除成功')
    loadTeacherList()
  } catch (error) {
    message.error('删除失败')
  }
}

// 批量删除
const handleBatchDelete = () => {
  Modal.confirm({
    title: '确认删除',
    content: `确定要删除选中的 ${selectedRowKeys.value.length} 个教师吗？`,
    onOk: async () => {
      try {
        // 调用批量删除API
        // await teacherApi.batchDeleteTeachers(selectedRowKeys.value)
        
        message.success('批量删除成功')
        selectedRowKeys.value = []
        loadTeacherList()
      } catch (error) {
        message.error('批量删除失败')
      }
    }
  })
}

// 导出教师
const handleExport = () => {
  message.info('导出功能开发中...')
}

// 表格变化处理
const handleTableChange = (pag) => {
  pagination.current = pag.current
  pagination.pageSize = pag.pageSize
  loadTeacherList()
}

// 加载教师列表
const loadTeacherList = async () => {
  try {
    loading.value = true
    
    // 构建查询参数
    const params = {
      ...searchForm,
      page: pagination.current,
      pageSize: pagination.pageSize
    }
    
    // 调用API获取数据
    // const response = await teacherApi.getTeacherList(params)
    // teacherList.value = response.data
    // pagination.total = response.total
    
    console.log('加载教师列表', params)
  } catch (error) {
    message.error('加载教师列表失败')
  } finally {
    loading.value = false
  }
}

// 组件挂载时加载数据
onMounted(() => {
  loadTeacherList()
})
</script>

<style scoped>
.teacher-list {
  padding: 0;
}

.search-form {
  border-radius: 8px;
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.data-table {
  border-radius: 8px;
}

@media (max-width: 768px) {
  .action-buttons {
    flex-direction: column;
  }
  
  .action-buttons .ant-btn {
    width: 100%;
  }
}
</style>